<%@ page import="mercurialpractice.Bill" %>

<html>
<head>
    
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />

    <script>
      $(function() {
        
         $( "#sliderCherry, #sliderCurly, #sliderGenuine, #sliderWenge, #sliderWhite, #sliderSawdust " ).slider({
            range: "min",
            value: 0,
            min: 0,
            max: 1000,
            slide: function( event, ui ) {
              $( "#"+event.target.id+"Txt").val( ui.value );
            }
        });
      });
      
     
      function updateSlider(ui){
        //var slider=document.getElementById(ui.id.replace("Txt",""));
        //slider( "option", "value", parseInt(ui.value));
      }
      
      
      
    </script>

  </head>

  
<TABLE BORDER="0"> 
<tr>
    <td>
      <label for="cherry">
		<g:message code="bill.cherry.label" default="Cherry" />
		<span class="required-indicator">*</span>
      </label>
    </td>
    <td><g:field id="sliderCherryTxt" name="cherry" type="number" min="0" max="1000" value="${billInstance.cherry}" required="" onkeyup="updateSlider(this)"/> </td>
    <td> <div id="sliderCherry" style="width:450px"/></td>
  </tr>	
  
  
  <tr>
    <td>
      <label for="curlyMaple">
		<g:message code="bill.curlyMaple.label" default="Curly Maple" />
		<span class="required-indicator">*</span>
	</label>
    </td>
    <td><g:field id="sliderCurlyTxt" name="curlyMaple" type="number" min="0" max="1000" value="${billInstance.curlyMaple}" required=""/></td>
    <td> <div id="sliderCurly" style="width:450px"/></td>
  </tr>	

  
  
  
  <tr>
    <td>
      <label for="genuineMahogany">
		<g:message code="bill.genuineMahogany.label" default="Genuine Mahogany" />
		<span class="required-indicator">*</span>
	</label>
    </td>
    <td><g:field id="sliderGenuineTxt" name="genuineMahogany" type="number" min="0" max="1000" value="${billInstance.genuineMahogany}" required=""/></td>
    <td> <div id="sliderGenuine" style="width:450px"/></td>
  </tr>
  
  
  
  <tr>
    <td>
      <label for="wenge">
		<g:message code="bill.wenge.label" default="Wenge" />
		<span class="required-indicator">*</span>
	</label>
    </td>
    <td><g:field id="sliderWengeTxt" name="wenge" type="number" min="0" max="1000" value="${billInstance.wenge}" required=""/></td>
    <td> <div id="sliderWenge" style="width:450px"/></td>
  </tr>
  
  
  
   <tr>
    <td>
      <label for="whiteOak">
		<g:message code="bill.whiteOak.label" default="White Oak" />
		<span class="required-indicator">*</span>
	</label>
    </td>
    <td><g:field id="sliderWhiteTxt" name="whiteOak" type="number" min="0" max="1000" value="${billInstance.whiteOak}" required=""/></td>
    <td> <div id="sliderWhite" style="width:450px"/></td>
  </tr>
  
  
  
  <tr>
    <td>
      <label for="sawdust">
		<g:message code="bill.sawdust.label" default="Sawdust" />
		<span class="required-indicator">*</span>
	</label>
    </td>
    <td><g:field id="sliderSawdustTxt" name="sawdust" type="number" min="0" max="1000" value="${billInstance.sawdust}" required=""/></td>
    <td> <div id="sliderSawdust" style="width:450px"/></td>
  </tr>
  
  <tr>
    <td><label for="customer">
		<g:message code="bill.customer.label" default="Customer" />
		<span class="required-indicator">*</span>
	</label></td>
    <td><g:select id="customer" name="customer.id" from="${mercurialpractice.Customer.list()}" optionKey="id" required="" value="${billInstance?.customer?.id}" class="many-to-one"/></td>
  </tr>
  
</TABLE> 
</html>